
// 1.0 导入useRef Hooks的钩子函数
import { useState, useRef, useEffect } from 'react';

// function UseRef() {
//     // 2.0 定义一个ref的变量
//     let txtRef = useRef();

//     // 4.0 在useEffect 的回调函数中操作文本框给其赋值
//     useEffect(() => {
//         txtRef.current.value = 'hello'
//     })

//     return (<div>
//         {/* 3.0 使用ref绑定元素 */}
//         <input type="text" ref={txtRef} /> <br />
//         <button onClick={() => { alert(txtRef.current.value) }}>
//             获取文本框的值
//         </button>
//     </div>)
// }


function UseRef() {
    let [count, setCount] = useState(1)
    // 通过useRef()声明的变量可以长久保存值，而不被useEffect的执行覆盖
    let interval = useRef();
    useEffect(() => {
        interval.current = setInterval(() => {
            setCount(count => count + 1)
            console.log('setInterval', count);
        }, 400);
    }, [])

    useEffect(() => {
        if (count >= 10) {
            console.log('interval =>', interval.current);
            clearInterval(interval.current)
        }
    })

    return (<div>
        <button>
            获取文本框的值
        </button>
    </div>)
}

export default UseRef